<template>
	<view class="page">
		<text class="init-title">描述</text>
		<view class="init-textarea">
			<textarea v-model="message" placeholder="说出你的结伴旅行计划吧,比如时间安排,出行方式,旅途亮点等"></textarea>
		</view>
		<text class="init-title">上传图片</text>
		<view class="init-uploader">
			<view v-for="(item,index) in fileList" :key="index">
				<image :src="item.tempFilePath" mode="aspectFill"></image>
				<image @tap="beforeDelete(index)" src="/static/icon/companion/shanchu.png" mode="widthFix"></image>
			</view>
			<view class="upload-add" @tap="uploadImage" v-if="fileList.length < 4">
				<image src="/static/icon/companion/shangchuan.png" mode="aspectFill"></image>
			</view>
		</view>
		<view class="personal-view global-display global-a-items">
			<text>目的地</text>
			<view class="flex-1" @tap="chooseLocation">
				<text>{{poiname || '请选择目的地'}}</text>
			</view>
			<image src="/static/icon/personal-Data/jiantou-you.png" mode="widthFix"></image>
		</view>
		<view class="personal-view global-display global-a-items">
			<text>结伴时间</text>
			<picker @change="pickerChangeDate" mode="date" :start="startDate" :end="endDate">
				<view class="flex-1">
					<text>{{startTime || '请选择结伴时间'}}</text>
				</view>
			</picker>
			<image src="/static/icon/personal-Data/jiantou-you.png" mode="widthFix"></image>
		</view>
		<view class="personal-view global-display global-a-items">
			<text>希望人数</text>
			<picker @change="pickerChangePeople" :range="[1,2,3,4,5,6,7,8,9]">
				<view class="flex-1">
					<text>{{numberOfPeople || '请选择希望人数'}}</text>
				</view>
			</picker>
			<image src="/static/icon/personal-Data/jiantou-you.png" mode="widthFix"></image>
		</view>
		<button @tap="subMit" :disabled="disabled" class="sum-mit">提交</button>
	</view>
	<!-- 地图选点 -->
</template>

<script setup lang="ts">
	import {ref,watchEffect} from 'vue'
	import moment from 'moment'
	moment.locale('zh-cn');
	import {upLoadCos} from '@/utils/cos'
	// @ts-ignore
	import {addressCity} from '@/utils/qq-Location.js'
	import { checkLoginAPI } from '@/api/global'
	import { initPartnerAPI } from '@/api/companion'
	const message = ref('')
	// 暂存展示的图片
	const fileList = ref<any[]>([]);
	// 上传图片
	async function uploadImage(){
		wx.chooseMedia({
		  count: 3,
		  mediaType: ['image'],
		  sizeType:['compressed'],
		  sourceType: ['album', 'camera'],
		  success:async(res)=> {
			res.tempFiles.forEach(item=>{
				fileList.value.push(item)
			})
		  }
		})
	}
	// 删除指定的图片
	function beforeDelete(index:number){
		fileList.value.splice(index,1)
	}
	// 选中的市和位置
	const cityname = ref('')
	const poiname = ref('')
	// 选择目的地
	function chooseLocation(){
		wx.chooseLocation({
			success:async(res)=> {
				const cityData = await addressCity(res.latitude,res.longitude)
				cityname.value = cityData.city
				poiname.value = res.name
			},
			fail:(err)=>{
				console.log(err);
			}
		})
	}
	// 选择结伴时间
	const startTime = ref('')
	const currentMonth = moment().format('YYYY-MM-DD')//当前年
	const nextMonth = moment().add(1, 'month').endOf('month').format('YYYY-MM-DD');
	const startDate = ref(currentMonth)
	const endDate = ref(nextMonth)
	function pickerChangeDate(event:any){
		startTime.value = event.detail.value
	}
	// 选择人数
	const numberOfPeople = ref()
	function pickerChangePeople(event:any){
		numberOfPeople.value = Number(event.detail.value) + 1
	}
	// 监听必填值是否填写完毕
	const disabled = ref(true)
	watchEffect(()=>{
		const hasData = message.value && fileList.value.length > 0 && cityname.value && poiname.value && startTime.value && numberOfPeople.value > 0;
		disabled.value = hasData ? false : true
	})
	// 发布
	async function subMit(){
		wx.showLoading({title: '提交中',mask:true})
		await checkLoginAPI()
		const upLoadRes = await upLoadCos(fileList.value)
		await initPartnerAPI(
			{
				description:message.value,
				image:upLoadRes,
				city:cityname.value,
				full_address:poiname.value,
				companion_time:startTime.value,
				number_of_people:numberOfPeople.value
			})
		wx.navigateTo({url:'/pages/companion/my-activities'})
	}
</script>

<style>
	.page{
		background: #f6f7fb;
		min-height: 100vh;
		box-sizing: border-box;
		padding-bottom: 0;
		overflow-x: hidden;
	}
	.init-title{
		margin: 24rpx 20rpx 12rpx;
		font-weight: 600;
		font-size: 32rpx;
		color: #1f2d3d;
	}
	.init-textarea{
		background-color: #ffffff;
		font-size: 30rpx;
		border-radius: 16rpx;
		margin: 12rpx 20rpx 20rpx;
		padding: 16rpx;
		box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.05);
		border: 2rpx solid #f0f2f5;
	}
	.init-textarea textarea{
		width: 100%;
		min-height: 220rpx;
		line-height: 1.6;
	}
	.init-uploader{
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 10rpx;
		margin: 12rpx 20rpx 8rpx;
	}
	.init-uploader view{
		height: 170rpx;
		overflow: hidden;
		position: relative;
		border-radius: 16rpx;
		background-color: #fafafa;
		border: 2rpx dashed transparent;
	}
	.init-uploader image:nth-child(1){
		width: 100%;
		height: 170rpx;
	}
	.init-uploader image:nth-child(2){
		position: absolute;
		width: 44rpx;
		top: 6rpx;
		right: 6rpx;
		background: rgba(0,0,0,0.45);
		padding: 6rpx;
		border-radius: 50%;
	}
	.upload-add{
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #ffffff;
		border: 2rpx dashed #d9dfe7;
		transition: all 0.2s ease;
	}
	.upload-add image{
		width: 70rpx;
		height: 70rpx;
		opacity: 0.8;
	}
	.personal-view text{
		width: 220rpx;
		font-size: 30rpx;
		color: #3a3f45;
		white-space: nowrap;
	}
	.personal-view image{
		width: 30rpx;
	}
	.personal-view{
		background-color: #ffffff;
		border: 2rpx solid #f0f2f5;
		border-radius: 16rpx;
		padding: 26rpx 20rpx;
		margin: 16rpx 20rpx;
		box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.05);
	}
	.personal-view input,picker{
		flex: 1;
	}
	.sum-mit{
		background-color: #ffd84d;
		width: 80%;
		margin: 24rpx auto 24rpx;
		border: none;
		border-radius: 50rpx;
		color: #1f2d3d;
		font-weight: 600;
		letter-spacing: 2rpx;
		box-shadow: 0 10rpx 24rpx rgba(255, 216, 77, 0.45);
		transition: all 0.2s ease;
	}
	.sum-mit[disabled]{
		opacity: 0.6;
		box-shadow: none;
	}
	.flex-1{
		flex: 1;
	}
	.flex-1 text{
		color: #7a869a;
	}
</style>